<template>
  <div v-if="package_traveler.length > 0 && travelerTotalNum>0">
    <div class="mod-box">
      <h3>{{traveler_type_name}}信息<span>需填写<i class="c-buy">{{travelerTotalNum}}个</i>{{traveler_type_name}}</span></h3>
      
      <!--单套餐-->
      <template v-if="package_traveler.length==1">
        <ul class="traveler-name van-hairline--top-bottom">
          <li v-for="(item, index) in this.travelersList.slice(0,3)" :key="index" :class="{'active':item.active}" @click="toggleTraveler(item,index)"><span class="date van-ellipsis">{{item.name}}</span></li>
          <li class="add-replace"><span class="date" @click="addTraveler(0)">新增/更换＞</span></li>
        </ul>
        <ul class="traveler-info van-hairline--top-bottom" v-for="(item, index) in package_traveler" :key="index">
            <li v-if="item.qty>0">
              <div class="l">
                  <span>{{item.sku_name}}</span>
              </div>
              <ul class="r">
                  <!--单出行人-->
                  <template v-if="item.id_real_type==1">
                    <li @click="eidtTraveler(0)">
                      <div class="item-l">
                          <div v-if="selected_traveler[0].length>0">
                              <b>{{selected_traveler[0][0].name}}</b>
                              <p v-if="selected_traveler[0][0].note" class="c-main">{{selected_traveler[0][0].note}}</p>
                              <p v-else>{{selected_traveler[0][0].identity[0].name}}{{selected_traveler[0][0].identity[0].code}}</p>
                          </div>
                          <div v-else>
                            <p>点击添加{{traveler_type_name}}1</p>
                          </div>
                      </div>
                      <van-icon class-prefix="ucai-icon" name="bianji1"/>
                    </li>
                  </template>
                  <!--多行人-->
                  <template v-else>
                    <li v-for="(qty, q_index) in item.qty" :key="q_index" @click="eidtTraveler(q_index)">
                      <div class="item-l">
                          <div v-if="q_index < selected_traveler[0].length">
                              <b>{{selected_traveler[0][q_index].name}}</b>
                              <p v-if="selected_traveler[0][q_index].note" class="c-main">{{selected_traveler[0][q_index].note}}</p>
                              <p v-else>{{selected_traveler[0][q_index].identity[0].name}}{{selected_traveler[0][q_index].identity[0].code}}</p>
                          </div>
                          <div v-else>
                            <p>点击添加{{traveler_type_name}}{{q_index+1}}</p>
                          </div>
                      </div>
                      <van-icon class-prefix="ucai-icon" name="bianji1"/>
                    </li>
                  </template>  
              </ul>
            </li>
        </ul>
      </template>

      <!--多套餐-->
      <template v-else>
        <ul class="traveler-info van-hairline--top-bottom" v-for="(item, index) in package_traveler" :key="index">
          <li v-if="item.qty>0">
            <div class="l">
                <span>{{item.sku_name}}</span>
            </div>
            <!--单出行人-->
            <div class="multi-package" v-if="item.id_real_type==1" @click="addTraveler(index)">
                <ul>
                    <li>
                      <div class="item-l">
                          <div v-if="selected_traveler[index].length>0">
                            <b>{{selected_traveler[index][0].name}}</b>
                            <p v-if="selected_traveler[index][0].note" class="c-main">{{selected_traveler[index][0].note}}</p>
                            <p v-else>{{selected_traveler[index][0].identity[0].name}}{{selected_traveler[index][0].identity[0].code}}</p>
                          </div>
                          <div v-else>
                            <p>还需选择1个{{traveler_type_name}}</p>
                          </div>
                      </div>
                  </li>
                </ul>
                <van-icon class-prefix="ucai-icon" name="arrow_rgt"/>
            </div>
            <!--多出行人-->
            <div class="multi-package" v-else  @click="addTraveler(index)">
                <ul>
                    <template v-if="selected_traveler[index].length>0">
                    <li v-for="(v,i) in selected_traveler[index]" :key="i">
                      <div class="item-l">
                          <div>
                              <b>{{selected_traveler[index][i].name}}</b>
                              <p v-if="selected_traveler[index][i].note" class="c-main">{{selected_traveler[index][i].note}}</p>
                              <p v-else>{{selected_traveler[index][i].identity[0].name}}{{selected_traveler[index][i].identity[0].code}}</p>
                          </div>
                      </div>
                    </li>
                    </template>
                    <template v-if="(traveler_num[index]-selected_traveler[index].length)!=0">
                      <li>
                        <div>
                          <p>还需选择{{item.qty - selected_traveler[index].length}}个{{traveler_type_name}}</p>
                        </div>
                      </li>   
                    </template>
                </ul>
                <van-icon class-prefix="ucai-icon" name="arrow_rgt"/>
            </div>
          </li>
      </ul>
      </template>
    </div>
    
    <!--出行人列表（新增/更换）弹窗-->
    <traveler-list-popup :traveler_type_name="traveler_type_name" :showPicker.sync="showPicker" :travelersList="travelersList" :traveler_checked="traveler_checked" :selected_traveler="selected_traveler" :traveler_num="traveler_num" :traveler_index="traveler_index" :id_name_list="id_name_list" :id_key_list="id_key_list"/>

    <!--出行人添加编辑弹窗-->
    <traveler-edit-popup :traveler_type_name="traveler_type_name" :travelersList="travelersList" :selected_traveler="selected_traveler" :traveler_index="traveler_index" :lastNum="lastNum" :show.sync="show" :title="title" :eidt_id="eidt_id" :eidt_name="eidt_name" :eidt_phone="eidt_phone" :eidt_identity_name="eidt_identity_name" :eidt_identity_kind="eidt_identity_kind" :eidt_identity_code="eidt_identity_code" :eidt_commonly="eidt_commonly" :id_name_list="id_name_list" :id_key_list="id_key_list"/>
  
    <!--游客需出行人登录弹窗-->
    <traveler-login-popup :traveler_login.sync="is_traveler_login"/>
  </div>
</template>

<script>
	import { 
    Icon,
    Toast,
  } from "vant"
  import Vue from 'vue';
  import { 
    isLogin,
  } from '@utils/storage_base_config'
  import { getRolePrice } from '@utils/role'
  import travelerListPopup from '@views/booking/components/traveler-list-popup'
  import travelerEditPopup from '@views/booking/components/traveler-edit-popup'
  import travelerLoginPopup from '@views/booking/components/traveler-login-popup'
  export default {
    name: "traveler-info",
    data(){
        return {
          title:`新增${this.traveler_type_name}`,

          show: false,
          showPicker: false,

          id_name_list:[], //套餐对应的证件列表（name）
          id_key_list:[], //套餐对应的证件列表（id）
          traveler_index:0, //出行人索引
          traveler_checked:[], //出行人列表选中项
          lastNum:0,

          contact_name:'', //联系人姓名
          cantact_phone:'', //联系人电话
        
          eidt_id:"0", //编辑出行人id
          eidt_name: "", //编辑出行人姓名
          eidt_phone: "", //编辑出行人电话
          eidt_identity_name:"身份证",//编辑出行人证件名称cn
          eidt_identity_kind: "0", //编辑出行人证件名称id
          eidt_identity_code: "",  //编辑出行人证件号码
          eidt_commonly: false, //编辑出行人是否设为常用信息

          isVisitorPrice: getRolePrice() === '0', // 是否展示游客价
          is_traveler_login: false, //是否显示游客登录弹窗
        }
    },

    components:{
      [Icon.name]: Icon,
      [Toast.name]: Toast,
      [travelerListPopup.name]: travelerListPopup,
      [travelerEditPopup.name]: travelerEditPopup,
      [travelerLoginPopup.name]: travelerLoginPopup
    },

    props: {
      traveler_type_name:{
        type: String
      },
      product_kind:{
        type:Number
      },

      formData: {
        type: Object,
        default: () => {}
      },

      package_traveler:{
        type: Array
      },

      travelersList:{
        type: Array
      },

      selected_traveler:{
        type: Array
      },

      id_name:{
        type: Array
      },
      
      id_key:{
        type: Array
      },
    },

    computed: {
      //套餐对应的出行人数
      traveler_num() {
          let num = [];
          for(let item in this.package_traveler){
            let item_qty = "";
            if(this.package_traveler[item].id_real_type==1){
              this.package_traveler[item].qty ? item_qty = 1 : item_qty = 0;
            }
            else{
              item_qty = this.package_traveler[item].qty;
            }
            num.push(item_qty);
          }
          return num;
      },

      //出行人总数
      travelerTotalNum() {
        return this.traveler_num.reduce(function(num,item){
          return num + item;
        });
      }
    },

    watch:{
        //监听套餐数量变化
        traveler_num(newNum,oldNum){
          for (let i = 0; i < newNum.length; i++) {
             
              if(newNum[i]!==oldNum[i]){
                this.traveler_index = i;  //获取变动的索引

                //减少时，删除对应的出行人, 更新列表选中状态
                if((oldNum[i]>newNum[i]) && (this.selected_traveler[i].length > this.traveler_num[i])){
                  this.selected_traveler[i].pop(); 
                  for (var t = 0; t < this.travelersList.length; t++) {
                    this.travelersList[t].active = false;
                    for (var s = 0; s < this.selected_traveler[i].length; s++) {
                      if (this.travelersList[t].id === this.selected_traveler[i][s].id) {
                        this.travelersList[t].active = true;
                        break;
                      }
                    }
                  }
                }

                break;
              }
          }
        },

        //套餐选中的出行人
        selected_traveler(newNum,oldNum){

           //获取需提交出行人对应的索引
            var form_data_index = [];
            for(let i=0; i< this.formData.skus.length; i++){
              if(!this.formData.skus[i].id_real_type) {
                  continue; 
              }
              form_data_index.push(i);
            }

            //更新提交出行人信息
            for (var n = 0; n < newNum.length; n++) {
                let submit_traveler = [];
                newNum[n].forEach((v, k) => {
                    let item_obj = {
                        id: v.id,
                        identity_kind: v.identity[0].kind,
                        identity_code: v.identity[0].code,
                        name: v.name,
                        note: v.note,
                    };
                    submit_traveler.push(item_obj);
                });
  
                if(submit_traveler){
                  if(this.formData.skus[form_data_index[n]].travelers.length>0){
                    this.formData.skus[form_data_index[n]].travelers.splice(0,this.formData.skus[form_data_index[n]].travelers.length);
                  }
                  this.formData.skus[form_data_index[n]].travelers.push(...submit_traveler);
                }  
            };
        },

    },

    methods:{
        //显示游客登录弹窗
        isTravelerLogin(){
          if(!isLogin() && this.isVisitorPrice && !this.is_traveler_login && this.package_traveler.length){
            this.is_traveler_login = true;
          }
        },

        //单套餐选择取消出行人
        toggleTraveler(item,index){
          let traveler_len = this.formData.skus[0].qty;
          let select_len   = this.selected_traveler[0].length;
          if(this.package_traveler[0].id_real_type==1){
            traveler_len = 1; //单出行人
          }

          if(item.active){
                Vue.set(item,'active',false);
                this.selected_traveler[0].splice(this.selected_traveler[0].findIndex(v => v.id === item.id), 1);
          }else{
              if(traveler_len == 1){
                    this.travelersList.forEach((v, k) => {
                      if(index==k){
                        Vue.set(v,'active',true);
                      }else{
                         Vue.set(v,'active',false);
                      }
                    });
                    this.selected_traveler[0].splice(0,1,item);
              }
              else if(traveler_len == 2 && select_len ==2){
                    Toast(`您只需选择2个${this.traveler_type_name}`);
                    return false;
              }else{
                    Vue.set(item,'active',true);
                    this.selected_traveler[0].push(item);
              }

          }
    　　},

        //显示编辑弹窗(单套餐)
        eidtTraveler(index){
          this.isTravelerLogin();
          if(this.is_traveler_login){
            return false
          }

          this.show = true;
          this.id_name_list = this.id_name[0]; //更新证件类型列表
          this.id_key_list = this.id_key[0];
          this.lastNum = this.travelerTotalNum - this.selected_traveler[0].length;
          if(this.selected_traveler[0][index]){
            let selected_info = this.selected_traveler[0][index];
            this.title = `编辑${this.traveler_type_name}`;
            this.eidt_id = String(selected_info.id);
            this.eidt_name = selected_info.name;
            this.eidt_phone = selected_info.phone;
            this.eidt_commonly = selected_info.is_default==1 ? true : false;
            //判断证件信息是否完善
            if(selected_info.note){
              this.eidt_identity_name = "身份证";
              this.eidt_identity_kind = "0";
              this.eidt_identity_code = "";
            }else{
              this.eidt_identity_name = selected_info.identity[0].name;
              this.eidt_identity_kind = String(selected_info.identity[0].kind);
              this.eidt_identity_code = selected_info.identity[0].code;
            }
          }
          else{
            this.title = `新增${this.traveler_type_name}`;
            this.eidt_id = "0";
            this.eidt_name = "";
            this.eidt_phone = "";
            this.eidt_commonly = false;
            this.eidt_identity_name = "身份证";
            this.eidt_identity_kind = "0";
            this.eidt_identity_code = "";
          }
        },

        //添加联系人(多套餐)
        addTraveler(index){
          this.isTravelerLogin();
          if(this.is_traveler_login){
            return false
          }

          this.showPicker = true;
          this.traveler_index = index;
          this.id_name_list = this.id_name[index]; //更新证件类型列表
          this.id_key_list = this.id_key[index]; //更新证件类型列表
          this.$parent.travelerCardType(index); //对比出行人列表证件是否符号产品需求
          
          //更新列表选中项
          let selected_id = [];
          this.selected_traveler[index].forEach((v, k) => {
              selected_id.push(String(v.id));
          });
          this.traveler_checked=selected_id;
        }
    },

  }
</script>

<style lang="less" scoped>
@import "~@style_m/basic/utils/index";
.mod-box{
  background: #fff;
  border-radius: 5px;
  margin: 10px;
  h3{
    padding-left: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 48px;
    span{
      color: #999;
      font-size: 12px;
      font-weight: 400;
      margin-left: 10px;
    }
  }

}

.traveler-name{
  position: relative;
  margin-left: 8px;
  padding: 16px 0;
  overflow: hidden;
  height: 28px;

  li{
    float: left;
    width: calc(25% - 10px);
    height: 26px;
    line-height: 26px;
    text-align: center;
    border: solid 1px #f5f5f5;
    border-radius: 5px;
    background: #f5f5f5;
    margin-right: 5px;
    text-align: center;
    font-size: 12px;
      
    &.active{
      border: solid 1px @color-main;
      background: @color-main;
      position: relative;
      color: #fff;
    }

    &.add-replace{
      background: #fff;
      border: solid 1px @color-main;
      color:@color-main;
      width: 25%;
    }
  }
}

.traveler-info{
  padding: 0 16px;
  overflow: hidden;

  >li{
      position: relative;
      display: flex;
      box-sizing: border-box;
      width: 100%;
      font-size: 15px;
      overflow: hidden;
      line-height: 60px;
      
      &:not(:last-child)::after {
        position: absolute;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 0;
        border-bottom: 1px solid #e5e5e5;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }

      .l{
        flex: none;
        width: calc(25% + 5px);
        display: flex;
        align-items: center;
        span{
          line-height: 20px;
          .ellipsis(2);
        }
      }

      .multi-package{
            position: relative;
            width: 100%;
            overflow: hidden;
            display: flex;

            ul{
              width: 100%;
              li{
                position: relative;
                display: flex;
                align-items: center;
                height: 60px;

                &:not(:last-child)::after {
                  position: absolute;
                  -webkit-box-sizing: border-box;
                  box-sizing: border-box;
                  content: ' ';
                  pointer-events: none;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  border-bottom: 1px solid #e5e5e5;
                  -webkit-transform: scaleY(0.5);
                  transform: scaleY(0.5);
                } 

                b{
                    display: block;
                    line-height: 22px;
                  }

                p{
                  color: #999;
                  line-height: 18px;
                  font-size: 12px;
                  width: 100%;
                }
                
              }
            }

            .ucai-icon{
                display: flex;
                align-items: center;
            }

      }


      .r{
        position: relative;
        width: 100%;
        overflow: hidden;
        vertical-align: middle;
        li{
            position: relative;
            display: flex;
            box-sizing: border-box;
            width: 100%;
            overflow: hidden;
            line-height: 60px;

            &:not(:last-child)::after {
              position: absolute;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              content: ' ';
              pointer-events: none;
              right: 0;
              bottom: 0;
              left: 0;
              border-bottom: 1px solid #e5e5e5;
              -webkit-transform: scaleY(0.5);
              transform: scaleY(0.5);
            }

            .item-l{
                display: flex;
                align-items: center;
                width: 100%;
            }

            b{
              display: block;
              line-height: 22px;
            }

            p{
              color: #999;
              line-height: 18px;
              font-size: 12px;
              width: 100%;
            }
            
        }
      }

  }

}


.traveler-edit{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #f5f5f5;
  .card-name{
    color: @color-main;
  }

  .btn-save{
    margin: 0 16px;
    padding-top: 10px;
    button{
      margin-bottom: 20px;
    }
    a{
      font-size: 15px;
    }
  }
}
</style>
